<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Isotope Example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
     
     <div id="main">
        <h1>Vue isotope</h1>

        <h2>Filter</h2>
        <div class="button-group">  
            <button v-for="(val, key) in option.getFilterData" class="button" :class="[key===filterOption? 'is-checked' : '']"  @click="$refs.isotope.filter(key)">{{key}}
            </button>
        </div>

        <h2>Sort</h2>
        <div class="button-group">
          <button class="button" :class="[sortOption==='original-order'? 'is-checked' : '']"  @click="$refs.isotope.sort('original-order')">original order</button> 
          <button v-for="(val, key) in option.getSortData" class="button" :class="[key===sortOption? 'is-checked' : '']"  @click="$refs.isotope.sort(key)">{{key}}</button>
        </div>


        <h2>Layout</h2>
        <div>
            <button v-for="layout in layouts" :class="[layout===currentLayout? 'is-checked' : '']" class="button" @click="$refs.isotope.layout(layout)">
              {{layout}}
            </button>
        </div>
       
        <isotope ref="isotope" id="root_isotope1" :list="list" :item-selector="'element-item'" :options='option' @filter="filterOption=arguments[0]" @sort="sortOption=arguments[0]" @layout="currentLayout=arguments[0].layoutMode">
            <div v-for="element, index in list" :class='[element.category]' :key="index">
                <h3 class="name">{{element.name}}</h3>
                <p class="symbol">{{element.symbol}}</p>
                <p class="number">{{element.number}}</p>
                <p class="weight">{{element.weight}}</p>
            </div>
        </isotope>

        <br/>
        <a href="index.html">Simple example</a>
        <a href="complex.html">More complex example</a>
        <a href="component.html">Component example</a>

    </div>  
        <script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
        <script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
        <script type="text/javascript" src="..\libs\isotope\isotope.pkgd.js"></script>
        <script type="text/javascript" src="..\libs\isotope-cells-by-column\cells-by-column.js"></script>
        <script type="text/javascript" src="..\libs\isotope-cells-by-row\cells-by-row.js"></script>
        <script type="text/javascript" src="..\libs\isotope-horizontal\horizontal.js"></script>
        <script type="text/javascript" src="..\libs\isotope-masonry-horizontal\masonry-horizontal.js"></script>
        <script type="text/javascript" src="..\libs\isotope-fit-columns\fit-columns.js"></script>
        <script type="text/javascript" src="..\libs\isotope-packery\packery-mode.pkgd.js"></script>
        <script type="text/javascript" src="src\vue_isotope.js"></script>
        <script type="text/javascript" src="script\metal.js"></script>
    </body>
</html>